import React, { useState, useCallback, useEffect } from 'react'
import { getSofClientFindDropClient, getSysUserSelected } from '../../../../../Api/listUrl'
import { Input, Form, Button, Col, Row, message, Select, DatePicker } from 'antd'

const { Option } = Select;
const { RangePicker } = DatePicker;

/**
 * @description: 签约搜索
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-07-19） 创建
 * @updata: xiaoxujs（2021-07-20） 接口对接
 */

const SelectModule = ({ handleSelectDataFun, setSelectData, listFun }) => {
    const [form] = Form.useForm()
    const { resetFields } = form
    const [userList, setUserList] = useState([])
    const [clientList, setClientList] = useState([])
    //获取用户列表
    const userListFun = useCallback(() => {
        ; (async () => {
            const { code, data, msg } = await getSysUserSelected();
            if (code === '20000') {
                setUserList(data)
            } else {
                message.error(msg)
            }
        })();
    }, []);
    //客户
    const clientFun = useCallback(() => {
        ; (async () => {
            const { code, data, msg } = await getSofClientFindDropClient();
            if (code === '20000') {
                setClientList(data)
            } else {
                message.error(msg)
            }
        })();
    }, []);
    useEffect(() => {
        userListFun()
        clientFun()
    }, [userListFun, clientFun])
    //form
    const onFinish = (values) => {
        handleSelectDataFun(values)
    };

    //重置
    const handleReset = () => {
        resetFields()
        setSelectData({})
        listFun()
    }
    return <Form
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        form={form}
    >
        <Row>
            <Col span={6}>
                <Form.Item name="clientId" label="所属客户" hasFeedback>
                    <Select placeholder="请选择客户" showSearch filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }>
                        {
                            clientList.map(item => {
                                return <Option key={item.id} value={item.id}>
                                    {item.clientName}
                                </Option>
                            })
                        }
                    </Select>
                </Form.Item>
            </Col>
            <Col span={6}>
                <Form.Item name="conNo" label="合同编号">
                    <Input />
                </Form.Item>
            </Col>
            <Col span={6}>
                <Form.Item name="mainName" label="负责人" hasFeedback>
                    <Select placeholder="请选择负责人">
                        {
                            userList.map(item => {
                                return <Option key={item.id} value={item.id}>
                                    {item.name}
                                </Option>
                            })
                        }
                    </Select>
                </Form.Item>
            </Col>
            <Col span={6}>
                <Form.Item name="time" label="签定时间" hasFeedback>
                    <RangePicker />
                </Form.Item>
            </Col>
        </Row>
        <Row>
            <Col span={20}></Col>
            <Col span={4}>
                <Form.Item {...tailLayout}>
                    <Button onClick={handleReset}>重置</Button>
                    <Button type="primary" htmlType="submit">
                        确定
                    </Button>
                </Form.Item>
            </Col>
        </Row>
    </Form>
}

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};


export default SelectModule